<template>
  <div class="container">
    <Navbar> </Navbar>
    <header>
      <div>
        <img :src="mnnu" alt="" width="200px" />
      </div>
      <div class="logo">
        <img :src="imgurl" alt="" width="150px" />
      </div>
      <Search class="pos"></Search>
      <button class="btn">
        <router-link to="/shopcar" style="color:#fff;">前往购物车 <i class="el-icon-shopping-cart-2"></i></router-link>
      </button>
    </header>
    <hr />
    <div class="itemshow">
      <img :src="img" alt="" />
      <div class="item-describe">
        <div class="item-name">
          {{ goods.name }}
        </div>
        <p style="color: #ccc;">商铺：cwk校园商铺</p>
        <p style="font-size: 12px;">商铺位置：达理公寓楼</p>
        <p style="font-size: 12px; color: #ccc;">商家联系方式：18876230897</p>
        <div class="price" style="color: red;"><span style="color: #000;">商品单价：</span>￥{{ goods.price }}</div>
        <div class="price" style="color: red; font-size: 16px">商品总价： ￥{{ sum }}</div>

        <div class="count">
          <el-input-number v-model="num" :min="1" label="描述文字"></el-input-number>
          <img class="yaya-img" :src="yayaSvg" alt="" />
        </div>

        <button class="btn" @click="join">加入购物车</button>
      </div>
      <img :src="shopCartSvg" alt="" />
    </div>
  </div>
</template>

<script>
import Navbar from '@/components/base/header.vue'
import Search from '@/components/base/search.vue'
import imgurl from '@/assets/logo.png'
import mnnu from '@/assets/image/mnnu.png'
import { getGoods, addShoppingCart } from '@/api/index.js'
import shopCartSvg from '@/assets/image/shopcart.svg'
import yayaSvg from '@/assets/image/yaya.svg'
export default {
  components: {
    Navbar,
    Search
  },
  props: {
    id: {
      type: String,
      required: true
    }
  },
  data() {
    return {
      imgurl,
      mnnu,
      img: '',
      num: 1,
      goods: {},
      total: 0,
      shopCartSvg,
      yayaSvg
    }
  },
  methods: {
    async fun(url, params) {
      const { data } = await getGoods(url, { params })
      this.goods = data
      this.img = '/api' + this.goods.cover
    },
    async join() {
      const customId = JSON.stringify(JSON.parse(localStorage.getItem('accessToken')).data)
      const data = {
        id: this.id,
        quantity: this.num,
        total: this.goods.price * this.num,
        customId
      }
      const response = await addShoppingCart('/api/home/addshoppingcart', data)
      if (response.data.message === 'success') {
        this.open({ msg: '请您前往购物车页面查看', title: '加入购物车成功' })
      }
    },
    open(data) {
      this.$alert(data.msg, data.title, {
        confirmButtonText: '确定'
      })
    }
  },
  created() {
    this.fun('/api/home/desplay', { id: this.id })
  },
  computed: {
    sum() {
      return (this.num * this.goods.price).toFixed(2)
    }
  }
}
</script>

<style lang="less" scoped>
* {
  box-sizing: border-box;
}
.container {
  width: 100vw;
  overflow: hidden;
  height: auto;
  user-select: none;
}
header {
  display: flex;
  justify-content: center;
  align-items: center;
  user-select: none;
  height: 180px;
  .pos {
    margin-right: 50px;
  }
}

.itemshow {
  width: 1200px;
  height: 643px;
  user-select: none;
  margin: 0 auto;
  display: flex;
  img {
    width: 390px;
    height: 390px;
  }
  .item-describe {
    width: 590px;
    height: 590px;
    margin-left: 30px;

    .item-name {
      font: 700 16px Arial, 'microsoft yahei';
      color: #000;
      padding-top: 10px;
      line-height: 28px;
      margin-bottom: 5px;
    }
    .price {
      width: 400px;
      height: 35px;
      // background: linear-gradient(45deg, #da9583, #b8844f, #e3b587, #c48d39);
      border-radius: 2px;
      font-weight: 600;
      font-size: 18px;
      margin: 10px 2px;
    }
    .count {
      display: flex;

      align-items: center;
      // input {
      //   width: 30px;
      //   text-align: right;
      // }
      .yaya-img {
        width: 60px;
        height: 60px;
        margin-left: 20px;
      }
    }
  }
}
.btn {
  border: none;
  width: 130px;
  height: 40px;
  border-radius: 10px;
  cursor: pointer;
  background-color: #e7693f;
  color: #fff;
  font-weight: 600;
  font-size: 16px;
  margin-top: 15px;
  &:hover {
    background-color: #e9745a;
  }
}
</style>
